﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Web.Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>登录</title>
        <link href="../../App_Themes/asserts/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../../App_Themes/asserts/css/signin.css" rel="stylesheet" type="text/css" />
    <script src="../App_Themes/js/jQuery-1.11.3.js"></script>
    <script src="../App_Themes/asserts/js/popper.min.js" type="text/javascript"></script>
    <script src="../App_Themes/js/bootstrap.min.js" type="text/javascript"></script>
    <script>
        $(function () {
            // 激活注册按钮的条件
            var isOk = [0, 0];

            // 判断是否可以点击登录
            var enableBtnLogin = function () {
                for (var i = 0; i < 2; i++) {
                    if (!isOk[i]) {
                        $("#btnLogin").attr("disabled", true);
                        return;
                    }
                }
                $("#btnLogin").removeAttr("disabled");
            };



            // 用户名验证
            var nameCheck = function ($name) {
                var nameReg = /^[a-zA-Z0-9_]{1,}$/;
                if (!$name.val().match(nameReg)) {
                    $name.popover('show');
                    isOk[0] = 0;
                } else {
                    isOk[0] = 1;
                    $name.popover('hide');
                }
            };
            // 失去焦点
            $("#TextUsername").keyup(function () {
                nameCheck($(this));
                $("#btnLogin").removeAttr("disabled");
            });

            // 密码验证
            var pwdCheck = function ($pwd) {
                var pwdReg = /^[A-Za-z0-9_]+$/;
                if (!$pwd.val().match(pwdReg)) {
                    isOk[1] = 0;
                    $pwd.popover('show');
                } else {
                    isOk[1] = 1;
                    $pwd.popover('hide');
                }
            }
            // 失去焦点
            $("#TextPassword").keyup(function () {
                pwdCheck($(this));
                $("#btnLogin").removeAttr("disabled");
            });


            // 登录验证
            var loginCkeck = function () {
                nameCheck($("#TextUsername"));
                pwdCheck($("#TextPassword"));
            }

            // 鼠标移上操作            
            $("#btnLogin").mousemove(function () {
                loginCkeck();
                enableBtnLogin();
            });


        });
    </script>
</head>
<body class="text-center">
    <form class="form-signin" role="form" runat="server">
        
        <img class="mb-4" src="../App_Themes/images/header.png" alt="" height="100">
        <h1 class="h3 mb-3 font-weight-normal">见到你真开心^_^</h1>
        <asp:Label Style="color: #FF0000" ID="ErrorInfo" runat="server" Text=""></asp:Label>
        <label class="sr-only">用户名</label>
        <asp:TextBox class="form-control" ID="TextUsername" runat="server" placeholder="请输入用户名" data-placement="top" data-content="输入您的用户名" MaxLength="20"></asp:TextBox>
        <%--<input type="text" class="form-control" placeholder="Username" required="" autofocus="">--%>
        <label class="sr-only">密码</label>
        <asp:TextBox type="password" class="form-control" ID="TextPassword" runat="server" placeholder="请输入密码" data-placement="bottom" data-content="输入您的的密码" MaxLength="16"></asp:TextBox>
        <%--<input type="password" class="form-control" placeholder="Password" required="">--%>
        <div class="checkbox mb-3">
            <label>
                <asp:CheckBox ID="CheckBoxRemind" runat="server" />
                记住我
            </label>
        </div>
        <asp:Button class="btn btn-lg btn-primary btn-block" ID="btnLogin" runat="server" Text="登录" OnClick="btnLogin_Click" />
        <asp:HyperLink class="btn btn-link" ID="HyperLink1" runat="server" NavigateUrl="~/Web/Register.aspx">没有账号？前往注册</asp:HyperLink>
        <p class="mt-5 mb-3 text-muted">© 2021-2022</p>
    </form>
</body>
</html>
